<template>
<div>
   <el-container>
       <el-main >
         <div class="login-box">
        <div class="logo-box">
          <img class="logo" src="static/images/logo.jpg">
        </div>
         <el-form :label-position="labelPosition" label-width="60px" :model="loginForm">
              <el-form-item label="用户名">
                <el-input v-model="loginForm.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input type="password" v-model="loginForm.password"></el-input>
              </el-form-item>
            <el-form-item>  
           
                 <el-button size='medium' round @click="login">立即注册</el-button>
                 <el-button size='medium'
                 :loading="loading"
                  round type="primary" @click="login">立即登陆</el-button>

                <!-- <el-button>立即登陆</el-button> -->
              </el-form-item>
              
               <el-form-item> 
                  <el-row class="or">
                    <el-col :span="8"><i class="el-icon-goods"></i></el-col>
                    <el-col :span="8"><i class="el-icon-mobile-phone"></i></el-col>
                    <el-col :span="8"><i class="el-icon-service"></i></el-col>
                  </el-row>
              </el-form-item>
        </el-form>
</div>
  </el-main>
   </el-container>
</div>
</template>
<script>
import api from "../api";
import axios from "axios";
// import { cookie } from "@/utils/";
export default {
  name: "Login",
  created() {
    this.backUrl = this.$route.params.backUrl
      ? this.$route.params.backUrl
      : "http://www.lsdfly.com";
  },
  computed: {
    // comValue: function() {
    //   return this.task.value.split(",");
    // }
  },
  methods: {
    callback() {
      clearTimeout(this.sid);
      // debugger
      this.$message({
        message: "登陆成功",
        type: "success"
      }); 
      //  location.href = this.backUrl;
      // console.log('sss')
    },
    load(url, callback) {
      let img = new Image();
      img.src = url;
      img.onload = callback;
      // let iframe = document.createElement('iframe');
      // iframe.src = url;
      // iframe.style.display = 'none';
      // iframe.onload = function(){
      //       iframe.remove();
      //       callback();
      // }
      // document.body.appendChild(iframe)
    },

    login(index) {
      this.loading = true;
      api
        .login(this.loginForm)
        .then(res => {
          console.log(res);
          let len = res.data.sso.length;
          for (let i = 0; i < len; i++) {
            this.load(res.data.sso[i], () => {
              len--;
              if (len == 0) {
                this.callback();
              }
            });
          }
          this.sid = setTimeout(this.callback, 2000);
          // console.log(sso)
          // axios.all(sso).finally(res=>{
          //     this.callback();
          // })

          // this.loading = false;
        })
        .finally(res => {
          this.loading = false;
        });
      // axios.post('login',this.loginForm)
      // .then(()=>{
      //     alert('sss')
      // })
      //    alert('ss')
      // this.task= this.tasks[index];
    }
  },
  data() {
    return {
      sid: null,
      backUrl: null,
      loading: false,
      labelPosition: "right",
      loginForm: {
        userName: "admin",
        password: "123456"
      }
    };
  }
};
</script>
<style>
body {
  background-image: url(/static/images/bg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
html,
body {
  height: 100%;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.or i {
  font-size: 30px;
  color: lightsalmon;
}
.logo-box {
  margin-bottom: 30px;
}
.logo-box .logo {
  width: 100%;
  height: 120px;
  border-radius: 10px;
}
a {
  color: #42b983;
}
.login-box {
  margin: 100px auto 0;
  width: 300px;
  height: 400px;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: white;
}
.mt15 {
  margin-top: 15px;
}
</style>
